<template>
  <div class="dy-main InsuranceBuyResult">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">购买结果</x-header>
    </div>
    <div class="dy-body">
      <img v-if="statusResult === '1'" class="statusResult" src="../../assets/img/Insurance/success.png">
      <div v-if="statusResult === '1'" class="statusMsg">购买成功</div>
      <img v-if="statusResult === '0'" class="statusResult" src="../../assets/img/Insurance/fail.png">
      <div v-if="statusResult === '0'" class="statusMsg">购买失败</div>
      <div v-if="statusResult === '1'" class="resultList">
        <div class="line">
          <div>产品名称</div>
          <div>{{ prdName }}</div>
        </div>
        <div class="line">
          <div>有效期</div>
          <div>{{ UsefulTime }}</div>
        </div>
        <div class="line">
          <div>生效日期</div>
          <div>{{ EffectiveDate }}</div>
        </div>
        <div class="line">
          <div>投保人</div>
          <div>{{ bondsMan }}</div>
        </div>
        <div class="line">
          <div>购买金额</div>
          <div>{{ BuyAmt }}</div>
        </div>
      </div>
      <div class="buttonGroup" :class="{'fail': statusResult === '0'}">
        <div class="myIns" @click="gotoMyIns()">我的保险</div>
        <div class="buyContinue" @click="gotoPrdList()">继续购买</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      statusResult: '',
      prdName: '',
      UsefulTime: '',
      EffectiveDate: '',
      bondsMan: '',
      BuyAmt: ''
    }
  },
  methods: {
    gotoMyIns () {
      this.$router.push({name: 'MyInsuranceList'})
    },
    gotoPrdList () {
      this.$router.push({name: 'InsuranceMain'})
    },
    getInsuranceInfoData () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'InsuranceBuyResult'}}),
        function (response) {
          response = JSON.parse(response)
          self.statusResult = response.status
          if (response.status === 0 || response.status === '0') {
            let data = response.data.data[0]
            self.prdName = data.prdName
            self.UsefulTime = data.UsefulTime
            self.EffectiveDate = data.EffectiveDate
            self.bondsMan = data.bondsMan
            self.BuyAmt = data.BuyAmt
          } else {
            alert('fail')
          }
        }
      )
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.getInsuranceInfoData()
  }
}
</script>

<style lang="less">
.InsuranceBuyResult{
  .dy-body{
    background: #fff;
    .statusResult{
      width: 1.08rem;
      height: 1.08rem;
      margin: 0.81rem 3.21rem 0.52rem 3.21rem;
    }
    .statusMsg {
      font-size: 0.3rem;
      height: 0.4rem;
      text-align: center;
      font-weight: bolder;
    }
    .resultList{
      font-size: 0.28rem;
      width: 92%;
      margin: 0.68rem auto;
      background: #F7F8FA;
      padding: 0.2rem 0.2rem;
      border-radius: 0.2rem;
      .line{
        font-size: 0.28rem;
        padding: 0.15rem 0.2rem;
        >div{
          display: inline-block;
        }
        >div:nth-child(1){
          width: 29%;
        }
        >div:nth-child(2){
          width: 69%;
          text-align: right;
        }
      }
    }
    .buttonGroup{
      margin: 0 0.5rem;
      font-size: 0.34rem;
      .myIns{
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        width: 3rem;
        float: left;
        color: #ec1b30;
        border: 1px solid #ec1b30;
        border-radius: 0.06rem;
      }
      .buyContinue{
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        width: 3rem;
        float: right;
        background: #ec1b30;
        color: #fff;
        border-radius: 0.06rem;
      }
    }
    .fail{
      margin-top: 2rem;
    }
  }
}
</style>
